<template>
	<view class="wanl-money">
		<view class="padding-lr padding-top-xl" style="height: 270rpx;background-color: #76bc69;">
			<view class="card">
				<view class="tips flex align-center justify-center">
					<text class="icon-anquan1 iconfont" style="font-size: 40rpx;"></text>
					<text class="text-30 margin-left-xs">资金安全有保障</text>
				</view>
				<view class="title" @tap="$wanlshop.to('/pages/user/money/list')">充值记录</view>
				<view class="money">
					<text>{{user.money.money1}}</text>
				</view>
				<view class="btn">
					 <!-- @tap="$wanlshop.to('/pages/user/setting/userApply?t=1')" -->
					 <view class="left" @tap="$wanlshop.to('/pages/user/money/withdraw')">提现</view>
					<view class="right" @tap="$wanlshop.to('/pages/user/money/recharge')">充值</view>
					
				</view>
			</view>
		</view>
		<view class="lists bg-white padding-lr-sm margin-lr">
			<view class="head flex align-center justify-between">
				<text>余额变动明细</text>
				<view class="more flex align-center justify-center" @tap="$wanlshop.to('/pages/user/money/list')">
					<text>全部</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="item" v-for="(item,index) in dataList" :key="index" @tap="toMoney(item)">
				<view class="top flex align-center justify-between">
					<text>{{item.title}}</text>
					<text>{{item.operation}}{{item.money}}</text>
				</view>
				<view class="bottom flex align-center justify-between">
					<text>{{$wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss')}}</text>
					<text>余额 {{item.newmoney}}</text>
				</view>
				<view class="reamrk">{{item.reamrk}}</view>
			</view>
		</view>
		
		<view v-if="dataList.length == 0">
			<wanl-empty style="padding: 0;" src="ticket_default3x" text="没找到任何账单明细"/>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/member/money/money_log',
				method: 'POST',
				data: {
					type: 1,
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		toMoney(item){
			this.$wanlshop.to(`/pages/user/money/details?data=${JSON.stringify(item)}`);
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #EDEDED;
}
.lists {
	margin-top: 320rpx;
	border-radius: 10rpx;
	.head {
		padding: 28rpx 0 18rpx 0;
		border-bottom: 1rpx solid rgba(182,182,182,0.5);
		> text {
			display: inline-block;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 44rpx;
		}
		.more {
			text {
				color: #888888;
				font-weight: 500;
				&:nth-child(1) {
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					line-height: 40rpx;
				}
				&:nth-child(2) {
					font-size: 24rpx;
				}
			}
		}
	}
	.item {
		padding: 20rpx 0;
		.top {
			text {
				display: inline-block;
				&:nth-child(1) {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #444444;
					line-height: 44rpx;
				}
				&:nth-child(2) {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 42rpx;
				}
			}
		}
		.bottom {
			text {
				&:nth-child(1) {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
				}
				&:nth-child(2) {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
		.reamrk {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-top: 10rpx;
		}
	}
}
.card {
	width: 690rpx;
	height: 506rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.tips {
		color: #4CBD66;
		background-color: #E9F4EB;
		width: 690rpx;
		height: 62rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		font-weight: 400;
	}
	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #777777;
		line-height: 40rpx;
		padding: 10rpx 32rpx 0 0;
		text-align: right;
	}
	.money {
		text-align: center;
		height: 102rpx;
		font-size: 84rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #333333;
		line-height: 102rpx;
		margin-top: 58rpx;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 96rpx;
		view {
			width: 276rpx;
			height: 96rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			text-align: center;
			line-height: 96rpx;
			&.left {
				border: 1rpx solid #E8E8E8;
				font-size: 38rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			&.right {
				background: #4CBD66;
				margin-left: 34rpx;
				font-size: 38rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
}
</style>
